<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<link rel="stylesheet" type="text/css" href="../../statics/bootstrap/css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" href="../../statics/styles/typeaheadjs.css">
	<!-- <link rel="stylesheet" type="text/css" href="../../statics/bootstrap/css/typeahead.js-bootstrap.css"/> -->
	<!-- <link rel="stylesheet" type="text/css" href="../../statics/styles/typeahead-fix-bug.css"/> -->
	<script src="../../statics/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="../../statics/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../../statics/commonjs/typeahead.bundle.js"></script>
	<!-- <script type="text/javascript" src="../../statics/commonjs/bloodhound.min.js"></script> -->
	<!-- <script type="text/javascript" src="../../statics/commonjs/bootstrap3-typeahead.min.js"></script> -->

</head>
<body>
<H2>Hello World</H2>
<form action="hello" method="post">
<input id="idtest" class="typeahead form-control" type="text" name="name" >
</form> 

	<script type="text/javascript">

$(function(){
	var companies = [
	  {"value":'1',"text":"abcdef"},
	  {"value":'2',"text":"abghijk"},
	  {"value":'3',"text":"abnopq"},
	  {"value":'4',"text":"abtuvw"}
  ];
  var lines = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            //prefetch: 'http://localhost:8080/common/compa2ny/l2ist'
            local:companies
        });

  lines.initialize();
  $('#idtest').typeahead(null, {
		name: 'lines',
		displayKey: 'text',

		source: lines.ttAdapter()
  });

})
  



	</script>

</body>
</html>